<template>
    <div class="s-checkbox">
        <input type="checkbox" id="checkbox" :checked="props.checked" @input="update">
        <label for="checkbox">{{ props.label }}</label>
    </div>
</template>

<script lang="ts" setup>
const emit = defineEmits(["update"])
const props = defineProps({
  checked: {
    type: Boolean,
    default: false
  },
  name: String,
  label: {
    type: String,
    default: ""
  }
})
const update = (e:Event) => {
  const targetChecked = (e.target as HTMLInputElement).checked
  emit("update", { name: props.name, value: targetChecked })
}
</script>
